<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">
  <link rel="icon" href="../../assets/images/logo/favicon.png" />
  <link rel="stylesheet" href="../../assets/source/css/vendor/flaticon.css" />
  <link rel="stylesheet" href="../../assets/source/css/vendor/fontawesome.css" />
  <link rel="stylesheet" href="../../assets/source/css/vendor/slick.css" />
  <link rel="stylesheet" href="../../assets/source/css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="../../assets/source/css/custom/main.css" />
  <link rel="stylesheet" href="../../assets/source/css/custom/blog-details.css" />
<style>
	*{
		padding: 0;
		margin: 0;
	}

	p{
		font-size: 26px;
		font-weight: bold;
		font-family: '微软雅黑';
		padding: 10px;
	}
	.i1{
		width:100px;
		height:100px;
	}
	.pic{
	margin-left: 10px;
	width:70px;
	overflow:hidden;
	}
	.picshow{
	margin-top: 100px;
	}
	.ban{
	  background-color: #409EFF !important; /* Element UI 的蓝色 */  
  	border-color: #409EFF !important; /* 确保边框也是蓝色 */  
  	color: #FFFFFF !important; /* 文本颜色，根据需要调整 */
	}
</style>
</head>
<body>

<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
        		<el-form-item label="博客编号">
                <el-input v-model="blog.bid" placeholder="编号"></el-input>
              </el-form-item>
            
            <!-- 类别输入提示框 -->
              <el-form-item label="博客标题">
              <el-row class="demo-autocomplete">
			  <el-col>
			    <el-autocomplete
			      class="inline-input"
			      v-model="blog.title"
			      :fetch-suggestions="querySearch1"
			      placeholder="请输入内容"
			    ></el-autocomplete>
			  </el-col>
			  </el-row>
			  </el-form-item>
            
            <el-form-item label="发表人">
                <el-input v-model="blog.uname" placeholder="发表人"></el-input>
              </el-form-item>
              <el-form-item label="时间">
                <div class="block">
			    <el-date-picker
			    @change="gettime"
			      v-model="blog.value1"
			      value-format="yyyy-MM-dd hh:mm:ss"
			      type="daterange"
			      range-separator="至"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期">
			    </el-date-picker>
			  </div>
              </el-form-item>
    
            <!-- 类别输入提示框 -->
              <el-form-item label="博客类别">
              <el-row class="demo-autocomplete">
			  <el-col>
			    <el-autocomplete
			      class="inline-input"
			      v-model="blog.btname"
			      :fetch-suggestions="querySearch"
			      placeholder="请输入内容"
			    ></el-autocomplete>
			  </el-col>
			  </el-row>
			  </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="byselectblogL()">查询</el-button>
            </el-form-item>
          </el-form>

        <!--表格显示-->
          <el-table
		    ref="multipleTable"
		    tooltip-effect="dark"
		    style="width: 100%"
		    :data="blogdata.slice((currentPage4-1)*pagesize,currentPage4*pagesize)"
		    :row-key="getRowKeys"
		    @selection-change="handleSelectionChange">
		    <el-table-column
		      type="selection" :reserve-selection="true">
		    </el-table-column>
		    <el-table-column
		      label="博客编号" align="center">
		      <template slot-scope="scope">{{ scope.row.bid }}</template>
		    </el-table-column>
		    <el-table-column
		      prop="title"
		      label="博客标题" align="center">
		    </el-table-column>
		    <el-table-column
		      prop="btname"
		      label="博客类别"
		      align="center"
		      show-overflow-tooltip>
		    </el-table-column>
		    <el-table-column
		      label="博客图片"
		      align="center"
		      show-overflow-tooltip>
		      <template slot-scope="scope">
            <span><img class="i1" :src=`../../../upload/${scope.row.pic}`></span>
          		</template>
		    </el-table-column>
		    <el-table-column
		      prop="uname"
		      label="发表人"
		      align="center"
		      show-overflow-tooltip>
		      </el-table-column>
		      
		      <el-table-column
          label="博客评论"
          align="center"
          >
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="look(scope.$index, scope.row)">查看</el-button>
          </template>
          </el-table-column>
		      
		    <el-table-column
		      label="状态"
		      align="center"
		      show-overflow-tooltip>
		      <template slot-scope="scope">{{ scope.row.status == 1 ? "已发布" : "封禁" }}</template>
		    </el-table-column>
          
          <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
            size="mini"
            type="danger"
            v-if="scope.row.status == 1"
            class="ban"
            @click="banL(scope.$index, scope.row)">封禁</el-button>
            <el-button
            size="mini"
            type="danger"
            v-if="scope.row.status == 0"
            @click="banL(scope.$index, scope.row)">解禁</el-button>
          </template>
          </el-table-column>
          
		  </el-table>
		  <div style="margin-top: 20px">
		    <el-button @click="toggleSelection()">取消选择</el-button><el-button @click="bansL">封禁</el-button>
		  </div>
		  
		  <!--页码-->
        <br/>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="currentPage4"
		      :page-sizes="[10,20,30,40,50]"
		      :page-size="pagesize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="blogdata.length">
          </el-pagination>
        </div>
    </el-card>
    
    <!-- 评论显示弹窗 -->
   <el-dialog
        title="博客评论"
        :visible.sync="pvalL"
        top="0">
        <div v-if="BlogPval.length < 1"><br/>暂无评价</div>
        <div class="col-md-12 col-lg-6" v-if="BlogPval.length > 0">
      <div class="user-comment">
       <h3>评论 <span></span></h3>
      </div>
      <ul class="comment-list">
       <li class="comment-item" v-for="(item,index) in BlogPval">
        <div class="comment"> 
         <a href="javascript:void(0);"><img :src=`../../../upload/${item.pic}` alt="comment-1" /></a>
         <div class="comment-text">
          <ul class="comment-header">
           <li> <a href="javascript:void(0);"> <i class="far fa-user"></i> {{item.uname}} </a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <li> <i class="far fa-calendar-alt"></i> {{item.time}}</li>
          </ul>
          <p>{{item.text}}</p>
         </div>
        </div></li>
      </ul>
     </div>
	<div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="pvalL = false">确 定</el-button>
       </div>
 	</el-dialog>
</div>

<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>

<script>
	let app = new Vue({
		el:'#app',
		data:{
			blog:{
				bid:'',
                title:'',
                uname:'',
                btname:'',
                value1: '',
    			start:"",
    		    end: "",
            },
            blogdata: [],
            blogtype:[],
            blogtitle:[],
            a:[],
            multipleSelection:[],// 存储选中行的 ID
            picshow:'',
            restaurants: [],
            currentPage4: 1,	//当前所在的页
            searchone:[],		//存取搜索数据
            total:0,			//总数
            pagesize:10,		//每页数量
            pval:[],//评论信息
            pvalL:false,
            BlogPval:[]
		},
        mounted(){
            this.getblogL();
            this.getblogtypeL();
        },
		methods:{
			//封禁与解封
			banL(index, obj){
				axios.post("../../blogController/banL", qs.stringify({
					bid:obj.bid
				})).then(resp=>{
					if(resp.data == 1){
						this.byselectblogL(this.currentPage4);
						alert("解禁成功");
					}else if(resp.data == 0){
						this.byselectblogL(this.currentPage4);
						alert("封禁成功");
					}else{
						alert("操作失败");
					}
				});
			},
			//时间修改
			gettime(value1) {
			      //定义开始结束时间
			      if (value1 != null) {
			    	  this.blog.start = value1[0];
			    	  this.blog.end = value1[1];
			      }else{
			    	  this.blog.start ='';
			    	  this.blog.end ='';
			      }
			    },
            //获取博客信息信息
            getblogL(){
            	axios.get("../../blogController/getblogL").then(resp=>{
            		this.blogdata = resp.data;
            		this.blogtitle = this.blogdata;
            	});
            	//this.byselectblogL(1);
            },
            //获取博客类别
            getblogtypeL(){
            	axios.get("../../blogtypeController/gettype").then(resp=>{
            		this.blogtype = resp.data;
            		this.restaurants = this.blogtype;
            	});
            },
            //条件查询
            byselectblogL(){
            	//存临时变量
            	this.searchone = this.blog;
            	axios.post("../../blogController/byselectblogL", qs.stringify({
            		bid:this.searchone.bid,
            		title:this.searchone.title,
            		uname:this.searchone.uname,
            		start:this.searchone.start,
            		end:this.searchone.end,
            		btname:this.searchone.btname
            	})).then(resp=>{
            		this.blogdata = resp.data;
            	});
            },
          //每页展示数据条数的调整
    		handleSizeChange(val) {
    			//变化每页值的数量
    			this.pagesize = val;
    	      },
    	      //控制页面的跳转
    	    handleCurrentChange(val) {
    	    	  this.currentPage4 = val;
    	      },
            //title提示
            querySearch1(queryString, cb) {
                var blogtitle = this.blogtitle;
                var results = queryString ? blogtitle.filter(this.createFilter(queryString)) : blogtitle;
                // 调用 callback 返回建议列表的数据
                cb(results);
              },
          //返回输入建议的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据，这些数据就是输入建议的数据
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
              },
              createFilter(queryString) {
                  return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                  };
                },
            
    	  //文章路径
    		getFile(event){
    			this.update.pic = event.target.files[0];
    			let URL = window.URL || window.webkitURL;
                // 通过 file 生成目标 url
                this.picshow = URL.createObjectURL(event.target.files[0]);
    		},
    		//全选与取消选择
    		toggleSelection(rows) {
    	        if (rows) {
    	          rows.forEach(row => {
    	            this.$refs.multipleTable.toggleRowSelection(row);
    	          });
    	        } else {
    	          this.$refs.multipleTable.clearSelection();
    	        }
    	      },
    	    //查看评论
    	      look(index, obj){
    	        	axios.get("../../blogController/getBlogPval",{
    	                params:{
    	                  bid:obj.bid
    	                }
    	              }).then(resp=>{
    	                this.BlogPval = resp.data;
    	                this.pvalL = true;
    	              });
    	        },
 	        handleSelectionChange(val) {
 	            // 更新 selectedRows 数组以反映当前页的选中状态  
 	            // 注意：这里可能需要一些逻辑来避免重复添加或错误地删除项  
 	            this.multipleSelection = val.map(item => item.bid); // 假设每行数据都有一个唯一的 id  
 	            console.log(this.multipleSelection);
 	          },
 	          //回显
 	         getRowKeys(row) {
 	             return row.bid;
 	          },
 	          //批量封禁
 	         bansL(){
 	        	  if(this.multipleSelection.length == 1){
 	        		 let bid = String(this.multipleSelection[0]);
 	        		 axios.post("../../blogController/selectbanL", qs.stringify({
 	        			 bid:bid
 	        		 })).then(resp=>{
 	        			 if(resp.data == -1){
 	        				 alert("该博客已经封禁");
 	        			 }else if(resp.data == 0){
 	        				 alert("封禁成功");
 	        				this.byselectblogL();
 	        				//取消
 	 	        			this.toggleSelection();
 	        			 }else{
 	        				 alert("封禁失败");
 	        			 }
 	        		 });
 	        	  }else{
 	        		 let bids = this.multipleSelection.join(',');
 	 	        	  axios.post("../../blogController/bansL",qs.stringify({
 	 	        		 bids:bids
 	 	        	  })).then(resp=>{
 	 	        		  if(this.multipleSelection.length == resp.data){
 	 	        			  alert("封禁成功");
 	 	        			 this.byselectblogL();
 	 	        			 //取消
 	 	        			this.toggleSelection();
 	 	        		  }
 	 	        	  });
 	        	  }
 	          }
		}
	});
</script>

</body>
</html>